<template>
  <div class="news">
    <div class="scroll-list-wrap" ref="scroll">
      <cube-scroll :data="newslist">
        <ul>
          <li class="li" v-for="value in newslist" :key="value.id">
            <router-link :to="'/index/news/' + value.id">
              <div v-text="value.title" class="title"></div>
              <div class="time">
                <div>发表时间：{{value.create_at | time('Y-M-D H:m:S')}}</div>
                <div>浏览量：{{value.visit_count}}</div>
              </div>
            </router-link>
          </li>
        </ul>
        <cube-button :outline="true" style="margin-top: -1px" @click="loadMore">加载更多</cube-button>
        <div style="height: 2px"></div>
      </cube-scroll>
    </div>
  </div>
</template>

<script>
export default {
  props: ['height'],
  data () {
    return {
      newslist: null,
      // 页数
      page: 1
    }
  },
  methods: {
    // 获取新闻列表
    getNews (callback = () => {}) {
      this.axios.get('index/news')
        .then(res => {
          this.newslist = res.data
          callback()
        })
        .catch(err => {
          if (err.message.includes('timeout')) {
            let toast = this.$createToast({
              txt: '请求超时',
              type: 'txt'
            })
            toast.show()
            --this.page
          }
          callback()
        })
    },
    loadMore () {
      this.axios.get('index/news', { params: { page: ++this.page } })
        .then(res => {
          this.newslist = this.newslist.concat(res.data)
        })
        .catch(err => {
          if (err.message.includes('timeout')) {
            let toast = this.$createToast({
              txt: '请求超时',
              type: 'txt'
            })
            toast.show()
            --this.page
          }
        })
    }
  },
  created () {
    this.getNews(this.load().hide)
  },
  mounted () {
    this.$refs.scroll.style.height = this.height + 'px'
  }
}
</script>

<style lang="stylus" scoped>
  .scroll-list-wrap
    .li
      padding 10px
      border-bottom 1px solid #0095ff
      a
        color #333
        .title
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
          font-size 16px
        .time
          margin-top 10px
          display flex
          font-size 13px
          justify-content space-between

</style>
